<template>
	<view>
		<uni-popup ref="reserve" type="bottom" border-radius="16rpx 16rpx 0 0" @maskClick="maskClick" :safeArea="false">
			<view class="carListBox" :style="{paddingBottom:props.isPhonex?'160rpx' : '150rpx'}">
				<view class="" style="width: 100%;height:2rpx"></view>
				<view class="titles">优惠明细</view>
				<view class="shopTol">
					<view>合计<span style="font-size: 24rpx;color: #999;font-weight:400">（含打包费）</span> </view>
					<view class="price"><span style="font-size: 20rpx;">¥</span>3680</view>
				</view>
				<view class="shopTol">
					<view>优惠合计<span style="font-size: 24rpx;color: #999;font-weight:400">（以下单为准）</span> </view>
					<view class="price" style="color:#FC4C40"><span
							style="font-size: 20rpx;">-¥</span>10</view>
				</view>
			<!-- 	<view class="shopTol">
					<view>满减</view>
					<view class="price" style="color:#FC4C40"><span style="font-size: 20rpx;">-¥</span>{{detail.totalManBackPrice||0}}</view>
				</view> -->
				<view class="shopyh">
					<view> <text class="acon-zhekou"
							style="color: #FF7744;font-size:38rpx;margin-right:10rpx"></text>代金券</view>
					<view class="price" style="color:#FC4C40;"><span
							style="font-size: 20rpx;">-¥</span>2</view>
				</view>
				<view class="shopyh">
					<view> <text class="acon-zhekou"
							style="color: #FF7744;font-size:38rpx;margin-right:10rpx"></text>VIP资格券
					</view>
					<view class="price" style="color:#FC4C40;" @click="showVipDetail">
						<span style="font-size: 20rpx;">-¥</span>15
						<!-- <text class="cuIcon-unfold uniClass" v-if="detail.disVAmout>0" :class="showDisOut?'cuIcon-fold':'cuIcon-unfold'"></text> -->
					</view>
				</view>
				<view class="shopyh">
					<view> <text class="acon-zhekou"
							style="color: #FF7744;font-size:38rpx;margin-right:10rpx"></text>项目优惠
					</view>
					<view class="price" style="color:#FC4C40;">
						<span style="font-size: 20rpx;">-¥</span>10
					</view>
				</view>
				<view class="shopyh">
					<view> <text class="acon-zhekou"
							style="color: #FF7744;font-size:38rpx;margin-right:10rpx"></text>预约优惠
					</view>
					<view class="price" style="color:#FC4C40;">
						<span style="font-size: 20rpx;">-¥</span>50
					</view>
				</view>
				<view class="shopyh">
					<view> <text class="acon-zhekou"
							style="color: #FF7744;font-size:38rpx;margin-right:10rpx"></text>技师优惠
					</view>
					<view class="price" style="color:#FC4C40;">
						<span style="font-size: 20rpx;">-¥</span>10
					</view>
				</view>
				<!-- <view v-if="showDisOut">
					<view class="shopyh">
						<view class="margin-left-xl">享受VIP特价专区折扣</view>
						<view class="price" style="color:#333;font-weight: 500;">
							{{detail.totalVipPrice<=detail.vipAllowTotalPrice?detail.totalVipPrice:detail.vipAllowTotalPrice}}
						</view>
					</view>
					<view v-if="detail.totalVipPrice>detail.vipAllowTotalPrice" class="shopyh">
						<view class="margin-left-xl">不享受VIP特价专区折扣</view>
						<view class="price" style="color:#333;font-weight: 500;">
							{{(detail.totalVipPrice - detail.vipAllowTotalPrice).toFixed(2)}}</view>
					</view>
				</view> -->

				<!-- <view class="totalCost">
					<view>合计</view>
					<view class="price"><span style="font-size: 20rpx;">¥</span>{{detail.totalPayPrice||0}}</view>
				</view> -->

			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const props = defineProps({
		isPhonex:{
			type:Boolean,
			default:false
		},
		detail: {
			type: Object,
			default: () => {
				return {};
			},
		},
		uSource:{
			type:String,
			default:''
		}
	});
	const emit = defineEmits(["maskClick"])
	const reserve = ref()
	const showDisOut = ref(false)
	const showVipDetail = () => {
		if (props.detail.disVAmout <= 0) {
			return
		}
		showDisOut.value = !showDisOut.value
	}
	const open = (v ?: any) => {
		reserve.value.open()
	}
	const maskClick = () => {
		emit("maskClick")
	}

	const close = () => {
		console.log('dis', reserve.value)
		reserve.value.close()
	}
	const getShopDis=()=>{
		// let str =(props.detail.totalSellerPrice - props.detail.totalPrice).toFixed(2).replace(/(\.\d*?[1-9])0+$/g, '$1').replace(/\.0+$/, '');
		// return str
		return 20
	}
	defineExpose({ open, close })
</script>

<style lang="scss" scoped>
	.carListBox {
		width: 100vw;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.titles {
			width: 100vw;
			height: 45rpx;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 700;
			text-align: center;
			margin-top: 30rpx;
		}

		.shopTol {
			margin-top: 40rpx;
			display: flex;
			padding: 0rpx 30rpx 0rpx 30rpx;
			justify-content: space-between;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 700;

			.price {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 36rpx;
				font-style: normal;
				font-weight: 700;
			}
		}

		.shopyh {
			margin-top: 40rpx;
			display: flex;
			padding: 0rpx 30rpx 0rpx 30rpx;
			justify-content: space-between;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;

			.price {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 36rpx;
				font-style: normal;
				font-weight: 700;
			}
		}

		.totalCost {
			display: flex;
			justify-content: space-between;
			border-top: 2rpx solid #F2F2F2;
			height: 45rpx;
			margin-top: 40rpx;
			padding: 30rpx 30rpx 30rpx 30rpx;
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 700;

			.price {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 36rpx;
				font-style: normal;
				font-weight: 700;
			}
		}
	}

	.uniClass {
		font-size: 24rpx;
		color: #333;
	}
</style>